9. HTML is a standard
HTML - Hypertext Markup Language, a standardized system
for tagging text files to achieve font, colour, graphic, and
hyperlink effects on World Wide Web pages.
-- oxforddictionaries.com
Hypertext Markup Language (HTML) is
the standard markup language for creating
web pages and web applications.
-- wikipedia.org
HTML - HyperText Markup Language: a
set of standards, a variety of SGML,
used to tag the elements of a hypertext
document. It is the standard protocol for
formatting and displaying documents on
the World Wide Web.
-- dictionary.com
HTML is the standard markup
language for creating Web
pages.
-- w3schools.com
10. We all benefit from the standard
HTML
Specification
(W3C)
Browser
Developers
Assistive
Technology
Developers
Web Site /
Web Application
Web Browser Screen Reader
All
Your Users
(real people)
Web Application
Developers
11. The contract model with accessibility APIs
From the Web Accessibility Initiativeâs âAccessible Rich Internet Applicationsâ
http://www.w3.org/TR/wai-aria-1.1/#intro_ria_accessibility
13. Browser and Assistive Technology combinations (BrAT)
Sometimes, even when HTML is valid and follows the standard, users may get different
experiences with different BrATs (for example: IE11+JAWS verses Firefox + JAWS).
In our experience, good, clean, standard HTML always does better than bad code.
Browsers can fix-up bad HTML to some degree so that it looks right, but it can still be presented
incorrectly by different BrATs.
When things are a lot different between BrATs, there is often a code validation issue behind it.
21. Why isnât HTML validation being done?
âIt looks right in my browserâ
But will that still be true after the next major browser update?
âWith HTML5,
all HTML is validâ
HTML5 is very flexible,
but not that flexible.
âHTML validation is:
⢠too hard
⢠takes too much time
⢠plagued with false positives
âMost of the big playerâs sites donât passâ
Can you afford the same risk that they can?
âWeâve seen valid HTML
that isnât accessibleâ
And weâve seen invalid HTML that is.
âI donât write HTMLâ
The JS framework we use generates the HTML,
and they must know what theyâre doing.
Thomas
First time at CSUN and my first time presenting.
Terrible with names and faces, no official diagnosis for it, but trust me, Iâm really bad so always, please feel free to approach me and (re)introduce yourself.
Legally blind in one eye since birth. Early stages of glaucoma in the other.
Sean
Sean
Sean
Sean
Three projects tracked over a number of months with some variation of how defects were tracked
Two were already under way and did not have accessibility oversight from the start. All were created by teams with little or no accessibility experience.
In each case at least 85% of the accessibility defects created were 100% preventable with these three behaviors.
It is worth noting that the âbonusâ behavior (screen reader testing) was not part of the 85% calculation but would have prevented some additional errors of a similarly basic nature.
Thomas
We want our developers to perform HTML validation.
Thomas
We want them to do this because it is a part of WCAG: Of the four P. O. U. R. principals, one is pretty much all about following the standards and focuses on compatibility with many platforms.
Thomas
We want them to do it, because HTML is âa standardâ
Here weâre showing definitions of âHTMLâ from a bunch of different sources: W3schools, dictionary.com, Wikipedia and OxfordDictionaries.com
http://www.w3.org/standards/faq#std
W3C publishes documents that define Web technologies. These documents follow a process designed to promote consensus, fairness, public accountability, and quality. At the end of this process, W3C publishes Recommendations, which are considered Web standards.
Thomas
This diagram shows a number of the various participants involved in the standard; it starts with the HTML specification, and ending with the end user.
Participating in the standard, means we all promise to use it consistently. If we do, we all win.
This slide shows a flow chart that starts with the HTML Specification and passes through a number of participants and products before making its way to âyour usersâ.
(One line)
The HTML standard starts with the specification made by the W3Câwhich we can all help contribute to.
Based on that standard, Browser Developers build browsers that will know what to do with the stuff in the specification.
Based on the specification, Assistive Technology developers build tools know what to do with what is in the browser and the HTML specification.
(Two lines)
Again, we start with the HTML standard,
Based on the standard, Web Developers also know how to write HTML.
Web developers use standard HTML to create documents that make up their web site / application.
(Three lines)
So when an HTML document gets parsed by the browser, UI elements are displayed in a consistent way.
Then when what is in the browser gets interpreted by the screen reader, it be presented in a consistent way as well.
Finally, when it gets to the user (remember, they are the whole reason weâre doing all of this in the first place): It will meet all userâs every expectation and they will love you for it.
The point is, we all need this shared understanding to help make things work as expected.
Thomas
The Web Accessibility Initiativeâs âcontract modelâ diagram; an image found on the âAccessible Rich Internet Applicationsâ
This is a closer look at the pieces of an HTML document that come together in the browser and how their meaning is shared with assistive technologies through the âaccessibility APIâ.
Thomas
We want our stuff to work in the browsers our users use, not just the ones our developers use.
We want our stuff to work in new browsers, not just the ones we have today.
When a new device or browser comes out, as long as it follows standards we all agree to, it should work as expected.
Itâs not only about the browsers though, for accessibility, we need to take it a step further:
We want our stuff to work with the assistive technologies that our users use.
Browsers:
Internet Explorer 11 â Microsoft
Firefox â Mozilla
Safari â Apple
Chrome â Google
Edge â Microsoft
Assistive Technologies:
JAWS â Freedom Scientific
VoiceOver â Apple
TalkBack â Google
Dragon Naturally Speaking
ZoomText
NVDA â NV Access
Thomas
The term âBrATâ is our abbreviation for Browser and Assistive Technology combination.
Thomas
Thomas
Thomas
Are custom elements valid HTML?
We canât consider them valid yet the validator doesnât know anything about the custom element; so it treats it like a SPAN.
If the custom element contains a block element, it breaks.
Thomas
Thomas
Notes:
One of the worst examples Iâve ever seen of this was âtitleâ on a custom dialog.
Thomas
Thomas
Thomas
https://validator.w3.org/docs/why.html
Too hard / takes too much time
The same could be said of ârealâ programming languages that are less forgiving.
Many DEVs still take it a step further and do unit testing on their back-end code.
HTML code quality needs to be a job requirement.
Why not with HTML? Because web browsers are too forgiving.
âIt works in the browser I tested it withâ
Thatâs like saying: âThis house is great as long as youâre less than four feet tallâ
Or: âItâs a good porch as long as only one person stands on it at a timeâ
We want our web apps to work the same on as many devices/browsers as possible
WCAG says âRobustâ
Many of the big-playersâ pages donât pass validation
Maybe they can afford the risk
Some valid HTML doesnât work; some invalid HTML is accessible.
It is more often the case where pages work more reliably in more BrATs when using standard, valid HTML
The JS framework weâre using generates the HTML, they must know what theyâre doing
I hope that happens soon.
Weâve heard âWe canât control the HTML that is being generated.â but have found this to be generally false.
Thomas
Thomas
State and dynamic content changes example:
Page with a form loads: run validation
Try to submit the form with no values entered and error messages are displayed: run validation
Fix all the errors so all the fields look valid: run validation again.
Thomas
Sean
Sean
Page at a time
Several options with similar coverage
Very different ways of displaying output
Site scanning
Varying capabilities and maturity levels
Shop carefully! Different packages might be very different fit-wise for different organizationâs environments
Sean
For these tools to do their best work, make sure youâve done HTML validation first!
What, more about HTML validation?
Yes!
One-third
Different numbers that one hears usually vary from about one-fifth to just over one-third (~20-35%). Depends on how one measures and who one asks more than which tool is used.
What this means: Type of issues (categorized WCAG Success Criteria, Techniques/Violations/etc. or customized checklists) vs the number of issues including multiple instances of the same issue
Why this comparatively small fraction is important and usefulâmany issues that are automatically detected are:
especially tedious or time-consuming to examine in the code
Items that will be a speed bump for other testing (e.g., ARIA issues)
Sean
Sean
Sean
Sean
Empathy pieceâunderstanding how keyboard-only users navigate pages.
In addition to the keyboard, voice controls or different hardware my be used. Imagine missing navigation skip links or long menus for someone using a sip-and-puff switch.
Sean
Also remember that weâre not just doing this for people with disabilitiesâŚ
Sean
While one needs to be able to perform the same task with a keyboard as one does with a mouse, some variation in how tasks are performed is often acceptable. For example, with a mouse, you can highlight some text, and drag and drop it to a new place in a document. It is an acceptable keyboard-equivalent to be able to highlight some text, cut it and then paste it to its new spot.
Other examples:
In a pick-list
Moving a floating panel or dialog
Sean
Sean
Thomas
Thomas
Thomas
Learn to do each of these incrementally; donât expect developers to learn this all at once or they will be set up to fail.
Name:
You should be able tell what the purpose of the element is.
The name doesnât need to contain the role, because: Just like designers wouldnât like it if you put the word âbuttonâ on every buttonâŚ
Role
Native, semantic elements all know what their role is, it sets the expectation for how the element should behave.
States / Properties
Some elements include lots of important details, like âcheckedâ or âdisabledâ or âhas submenuâ or âcollapsedâ
Additional descriptive information
Sometimes we include helpful, instructive text to an element⌠such as input tips and error messages on form fields.
Sometimes the AT will tell you how to interact with a specific element