Many people with visual or cognitive disabilities can recognize phone number fields in HTML forms and usually understand what info needs to be provided to fill in the fields.
Phone numbers are frequently formatted in fixed, distinctive ways, and Web developers may feel that just providing visual formatting of the fields will be sufficient to identify them.
Not so fast
Even if all the fields have programmatically determined names, a text label must also identify the set of fields as a phone number. The label alerts screen reader users about the content necessary to complete the form field correctly.
Best Practice in HTML5
In its most basic form, a telephone form input and text label can be implemented like this:
The vestibular system includes parts of the inner ear and brain, responsible for sensory information processing and spatial orientation.
According to the folks at Vestibular.org, “as many as 35 percent of adults aged 40 years or older in the United States (approximately 69 million Americans) have experienced some form of vestibular dysfunction.”
People with vestibular disorders experience symptoms like motion sickness, balance problems, chronic dizziness, headaches, and nausea when looking at large-scale motion on the screen.
Don’t use animations or transitions in interactions without giving the user a way to turn them off.
Use the @media (prefers-reduced-motion) media query to respect user preferences.
The prefers-reduced-motion CSS media feature is used to detect if the user has requested that the system minimize the amount of animation or motion it uses.
PowerPoint for Office 365 can transcribe your words as you present and display them on-screen as captions in the same language you are speaking, or as subtitles translated to another language.
12 spoken languages are supported. Subtitles and captions can be written in over 60 languages.
This can help accommodate individuals in the audience who may be deaf or hard of hearing, or more familiar with another language, respectively. This version of PowerPoint can also create downloadable text transcripts from the live presentation.
See it in action
A group of Chinese students visiting from the University of Washington stopped by the Microsoft AI and Research offices to learn about Microsoft Translator’s speech translation technology. In this video, Will Lewis – Principal Technical PM for Microsoft Translator – demonstrated how the Translator live feature and Presentation Translator for PowerPoint can be used to provide live transcription and translation in the classroom.
Making online content available to every user is the most important requirement for a website. Accessible design takes effort. You must learn about the specific guidelines and build these rules into your design and content. You must also be prepared to conduct a lot of manual testing.
How can a web developer test a website to get an initial baseline on the items that need to be fixed so they are accessible?
Check out A11ygator, a simplified dashboard where you can type a website URL to check and get an accessibility report.
A11ygator uses Pa11y under the hood. You can select the WCAG standard and the wait time – the time to wait before A11ygator actually starts to test, useful for websites that may take some seconds to render the content.
Also, you will get a screenshot of the actual page that A11ygator has tested, plus the ability to download the report in JSON format.
“Sighted users see the word and screen reader users can hear the word when the label is read to them. Older screen readers that do not support HTML 5 or ARIA may not say ‘required’ if the word is not published in the <label>.”
There is an accessibility design flaw on most responsive websites that affects users who experience hand tremors.
Problem: There is not enough space between touch targets on mobile devices for folks who suffer hand tremor issues. These users need some un-clickable screen space between touch targets…an area where they can place a finger to steady their hand so they can successfully scroll the screen without activating a link by mistake.
“For a lot of people with hand tremors – caused by for instance Parkinson’s disease or essential tremor – unintentional clicks happen all the time. Especially while scrolling on a touch screen. If you think about it, touch screen scrolling requires a lot of fine motor control. You need to place your finger on the correct part of the screen, flick it at the right speed and in the right direction, and most importantly: keep it on the screen at all times during this gesture. Many web and app interfaces are designed in a way that causes big problems for users who have a hard time with this scroll gesture.”
Advice to all website designers and developers of responsive websites from a user with Parkinson’s disease
“Add some space between the different objects so that I can put my finger down without activating something.”
Solution: Add a bit of unclickable space between each touch target on the page.
Example that fails: Difficult mobile layout for user with hand tremors to navigate
Example that passes: 60 pixels of vertical space between content objects makes it easier for the user with hand tremors to anchor a finger so they can scroll the mobile screen.
If you have a PDF document that has 21 or more pages, you need to include bookmarks that parallel the accessible document structure. This allows folks who use assistive technology an easier way to navigate a PDF document.
NOTE: Bookmarks are best added after the document structure tags are finalized.
How to add bookmarks based on a document’s structure via Adobe Acrobat Pro DC:
1. Select Bookmarks icon on the Accessibility Checker panel
2. Select the Options icon
3. Select New Bookmarks from Structure
4. In the Structure Elements dialog box, select the element(s) that you want to use as bookmarks.