Creating accessible sites with WordPress and WooCommerce

Creating accessible sites with WordPress and WooCommerce

To contribute to the ‘Accessibility Days 2018‘, an awareness event for software developers, designers, manufacturers, and others, that takes place in Bologna, on May 19th and 20th, Rafael Minuesa will be giving a lecture on how to create accessible sites with WordPress and WooCommerce.

Last year we prepared a Slide Presentation on the same topic, but unfortunately Rafael wasn’t able to attend. However we will be reusing some of that material, specifically the introduction that deals with statistical facts on the number of users around the world who suffer from some kind of disability, to help put the issue into perspective, and that we have embedded below again:

 

Below are some of the additional topics we would like to cover this year.

Accessible Markup, such as:

  • ARIA Landmark HTML5 sectioning elements
    • <header>
    • <nav>
    • <main>
    • <aside>
    • <footer>
  • CSS class screen-reader-text
    • To hide text from vision that is useful only for screen readers users
    • To skip links for keyboard navigation before the link get focus
  • Web forms
    • Provide instructions
    • Label controls for input fields
    • Group controls with fieldsets and legends
    • Accessible notifications (error and success messages)

Dos and Don’ts on Accessible Web Design, including:

  • Text style and layout
  • Font size
  • Resize text
  • Color Schemes
  • Color Contrast

Accessible Content, that covers the use of:

  • Descriptive link texts
  • Link destinations
  • Headings
    • One unique H1 per page, post or archive describing what the page is about
    • H2 through H6 to divide sections of the page
    • Don’t skip or mix up headings.
  • Alt text for images

We will also explain what kind of tools we can use and how to test our WordPress sires and WooCommerce stores for accessibility. Since we are using the WordPress platform most of these tools come in the form of plugins such as:

  • WP Accessibility Plugin enables skip links with WebKit support, adds language and text direction attribute, adds an outline to the keyboard focus state for focusable elements, provide a toolbar toggling between high contrast, large print, and desaturated (grayscale) views of your theme, and enforces the use of alt attributes on images.
  • Access Monitor’ schedules accessibility site audits weekly and reports a list of different accessibility issues.
  • Accessibility Widget’ adds a sidebar widget to change text size in your WordPress or WooCommerce site, allowing you to resize the content inside HTML and CSS tags, set font sizes, set controller text, or set tooltip text on mouse hover.

Finally, we will introduce some of the Testing and Development Tools that can be used to test your WordPress and WooCommerce website accessibility for different target groups, such as:

  • WAVE (Web Accessibility Evaluation Tool) that inspects any given web page and produces a Summary that lists Errors, Alerts, Features, Structural Elements, HTML5 and ARIA, etc.
  • Tota11y that will show errors covering multiple topics from headings, to contrast and form labels.
  • Tenon.io provides automated testing, and can be integrated into WordPress with the plugin Access Monitor

Accessibility Days 2018

Accessibility Days 2018To celebrate the Global Accessibility Awareness Day (GAAD) an awareness event for software developers, designers, manufacturers, and others, will take place in Bologna, on 18 May 2018.

The “Global Accessibility Awareness Day” is an event promoted every year during the month of May in various locations worldwide, to raise awareness of digital technologies on the topics of accessibility and inclusiveness, through comparison of usability with people with disabilities.

In Italy it was organized for the first time in 2017 by several communities of technology enthusiasts, in collaboration with the Ancona section of the UICI (Italian Union of the Blind and the Visually Impaired), with an event called “Accessibility Days”.

The first edition attracted a lot of enthusiasm among the participants, thanks to the numerous organized initiatives: not only classic sessions, but also workshops, like the Developer’s Corner, and real “sensory” experiences, such as the visit to the Tattile Museum and the dinner in the dark. In addition to being hosted in an exceptional location such as the Tattoile Museum Homer, one of the most important in the world of its kind, which just by itself is enough to leave you speechless.

On the wave of this enthusiasm we have decided to organize a new edition for 2018, this time in Bologna, involving other specialized companies on the subject of disabilities, such as the UICI Bologna, the “Universal Access” community and the Istituto dei Ciechi F. Cavazza, who will host us in an equally exceptional location, able to merge history, art and technology, in a marriage that will surely give us new emotions.

http://www.accessibilitydays.it

"How to make your WooCommerce store accessible" Slide Presentation

“How to make your WooCommerce store accessible” Slide Presentation

To contribute to the ‘HACK-cessibility Days‘ on May 19th and 20th, an awareness event for software developers, designers, manufacturers, and others, AccessibleWeb has created a Slide Presentation titled “How to make your WooCommerce store accessible” that you can view below:

 
The Presentation was prepared with Google Slides by Rafael Minuesa from AccessibleWeb, based on the original Post found at:
https://prowoos.com/make-woocommerce-store-accessible/.

You can view and download the original presentation from:
https://docs.google.com/presentation/d/1vVeD1PfQXOHGN75mLYrFSmM7mTJfkzYpqxDz9G1XtDo/

HACK-cessibility Days

To celebrate the Global Accessibility Awareness Day (GAAD) on May 19th and 20th, an awareness event for software developers, designers, manufacturers, and others, has been organized by the Ancona branch of the UICI (Unione Italiana dei Ciechi e degli Ipovedenti).

HACK-cessibility Days

During the event there will be several initiatives:

– sessions and laboratories with which to learn the theory and do some practice, with the support of experts in the various technologies and the opportunity to meet with disabled users, to test if what we are doing is actually accessible. We will talk, for example, about UX and design, development (web, mobile, desktop), IoT and the implementation of devices to improve the quality of life of people with disabilities.

– “sensorial” experiences to better understand, first of all, what it means to live with disabilities: among them there will be, for example, a “dark dinner” and guided tours to a “Tactile Museum”.
These experiences are very important because it is useless to talk about developing accessible solutions (whether they are software or electronic devices) unless you are actually experiencing how a disabled user relates to the “outside world”.

– CoderDojo: since today’s little ones will be tomorrow’s “hackers”, we have set up initiatives to transmit, beyond the passion for technology, the importance of themes such as accessibility!

The event will take place in Ancona on May 19th and 20th (Friday and Saturday).

Since the event has been organized by the Ancona branch of the UICI (Unione Italiana dei Ciechi e degli Ipovedenti), some of the initiatives will be more focused on the topic of visual disabilities, while others will deal with the aspect of disabilities in general.

More information, as well as how to sign up (free) at the event, are available on http://hackcessibilitydays.it/

New EU directive requires public sector websites and mobile applications to be accessible

Representatives of EU governments, the European Parliament, and the European Commission have drafted the first mandatory rules to enforce accessibility on European public sector websites and mobile apps. These include state, regional and local authorities, and bodies and associations serving the general interest that are governed by public law.

visual description of website' image

The rules will include guidelines on providing descriptions of non-textual content for persons with visual limitations, creating content that can be better presented across a range of devices that can be browsed without a mouse, making older content available to citizens in accessible form on demand, making mandatory for government videos to have closed captioning or another accessible alternative, including live streaming within a maximum of 14 days of broadcast, or providing accessibility options for online services that involve paying fines or fees. Additionally it must be clearly stated on each website what parts are not accessible.

The scope of the directive has not only been extended to mobile applications, which are more popular than websites, but also to extranets and intranets, to allow employees and students to access information that is essential in their daily lives.

The directive will enter into force 20 days after its publication in the EU Official Journal. European member states will then have 21 months to adopt national legislation to comply with it, and they must start applying the new rules to new websites one year later. For older websites the deadline is two years and for mobile apps 33 months.

Andrus Ansip, Vice-President for the Digital Single Market, welcomed the agreement:

“Internet access should be a reality for everyone. Leaving millions of Europeans behind is not an option. Tonight’s agreement is an important step towards a Digital Single Market, which is about removing barriers so that all Europeans can get the best from the digital world.”

Günther H. Oettinger, Commissioner for the Digital Economy and Society, said:

“It is not acceptable that millions of European citizens are left behind in the digital society. The agreement that we have just reached will ensure that everyone has the same opportunity to enjoy the benefits of the internet and mobile apps, to participate in society to a fuller extent and to lead a more independent life.”