making your site work on screen readers. What Accessibility really is Accessibility is a subset of UX focused on making your websites usable by the widest range of people possible, including those who have disabilities.
the concept’s definition itself: we want our application to be usable by as many people as possible. We should also care due to good ethics and laws and regulations.
• 10% to 15% of the total population • 50 to 75 million people in EU27* • There is a strong correlation between disability and ageing (numbers increase with demographic change) Source: Labour Force Survey (European Commission-Eurostat 2002) http://ec.europa.eu/ipg/standards/accessibility/index_en.htm *EU27 - European Union during 2007 - 2013 when it had 27 countries - European Union after 2016 without UK due to Brexit
if: - his/her visual acuity is less than 20/200 At the distance of 20 feet (~6m), a person doesn’t see a text, which can be seen at 200 feet (~60m) by a person with perfect eyesight. - his/her view angle is less than 20 degrees https://www.allaboutvision.com/lowvision/legally-blind.htm
in distinguishing colors. The ideal contrast ratio between two colors is of 4.5:1 https://webaim.org/resources/contrastchecker/ Chrome extension for live color blindness simulation: https://chrome.google.com/webstore/detail/i-want-to-see-like-the-co/jebeedfnielkcjlcokhiobodkjjpbjia Side by side color blind comparison tool: https://www.toptal.com/designers/colorfilter
disability rely heavily on visual information. We should provide audio and video content with a description and subtitles (closed captions). Do not autoplay media content. An interview with a Deaf academic librarian on web experience: https://developer.paciellogroup.com/blog/2017/02/sounding-out-the-web-accessibility-for-deaf-and-hard-of-hearing-people-part-1/ https://developer.paciellogroup.com/blog/2017/03/sounding-out-the-web-accessibility-for-deaf-and-hard-of-hearing-people-part-2/
into account users that don’t navigate web pages with the traditional mouse (along a keyboard). Ensuring the possibility to navigate by keyboard exclusively should be good enough for the time being, but have in mind other means such as Eye Controlling. https://www.tobii.com/tech/ https://arstechnica.com/gadgets/2017/08/windows-adding-eye-control-to-boost-accessibility/
recommended and fonts that have an unique shape for each letter. e.g.: Arial, Comic Sans*, Verdana, Century Gothic A font created with dyslexia in mind: https://www.dyslexiefont.com/en/typeface/ *Comic Sans is a great font choice for countering dyslexia
from the UI. We need to understand the difficulties our users are facing and only then, together with the UX, we can probably do something about it. Dark Patterns: tricks used in websites and apps that make you buy or sign up for things you didn’t mean to. Darkpatterns.org About users with social disorders using the web: https://developer.paciellogroup.com/blog/2018/08/a-web-of-anxiety-accessibility-for-people-with-anxiety-and-panic-disorders-part-1/
websites must be compliant with the Web Content Accessibility Guidelines 2.0, level AA. http://ec.europa.eu/ipg/standards/accessibility/index_en.htm In 2017, WCAG 2.0 AA compliance has been imposed in the U.S. as well. https://siteimprove.com/en-us/blog/no-more-excuses-there-is-now-a-us-deadline-for-beco ming-accessible/ WCAG 2.0 standard: https://www.w3.org/TR/WCAG20/
rules: • Links Links must have a context. The text within the link must be discernible. • Media Captions are provided for all live audio content in synchronized media. • etc
purpose. Developers have enough flexibility to use every tag as any tag, filling the behavior with CSS and JS. By using the markup as intended, it gives the document meaning (or semantics).
is a technical specification created by the World Web Consortium (W3C) on increasing accessibility of the web. https://w3c.github.io/aria/ With HTML, CSS and JS we can recreate the behaviour of any existing tag. With WAI-ARIA, we can fill the accessibility gaps.
role=”navigation” The HTML5 tag <nav> is a Landmark with the ARIA role of navigation built-in. We can manually add the ARIA landmark role=”navigation” to any html tag. Properties: used for adding extra meaning or semantics to elements e.g.: aria-required=”true” States: special properties that define the current condition of elements e.g.: aria-disabled=”true”
have built in semantics and behavior). Continue with adding ARIA roles, states and properties to the elements lacking the desired accessibility. List of all ARIA landmark roles: https://www.w3.org/TR/wai-aria-practices/examples/landmarks/HTML5.html
text-transform: uppercase. There are two specs that we can use to customize the way the screen reader reads: 1. CSS Speech Module (limited browser support) https://www.w3.org/TR/2018/NOTE-css3-speech-20180605/ The Speech Module is the successor of Aural Style Sheets (deprecated). https://developer.mozilla.org/en-US/docs/Web/CSS/Aural 2. Web Speech API This specification defined a JavaScript API that enables integrating speech recognition and synthesis into web pages. https://w3c.github.io/speech-api/speechapi.html
use Text To Speech (TTS). A Text To Speech system converts normal language text into speech. TTS engines are built in most platforms. Voice assistants like Alexa or Google Assistant use the platform’s TTS most of the times. But they can also use a bundled TTS alternative (for better language support or a wider choice of voices). https://tink.uk/using-the-web-speech-api-to-simulate-css-speech-support/
facilitate accessibility implementation on the web. It is an open-source initiative, with the objective of promoting accessibility. It provides an up-to-date collection of resources and how-to examples and it also tracks events on the topic. The term ‘A11Y’ stands for AccessibilitY as a numeronym. 11 https://a11yproject.com/
rzvnrosu
tomoki10
ijin
colopl
askua
oracle4engineer
rainerhahnekamp
kenichirokimura
kenichinakamura
fujiwara3
nomuson
iwamot
wisdommatt
jeffersonlam
andyhume
aleyda
eileencodes
mclloyd
kastner
jnunemaker
maltzj
sferik
scottboms
pedronauck
3n
