Embed Size (px)
Citation preview
If you build it, they will come.
But will they be able to use it?
What is "accessible" online?
Two Concepts in Content Accessibility
1)Semantics, or the construction of meaning through structure.
2)Alternatives, or the opportunity to access content in a different format.
Semantics and Structure
1) What is "meaning" in code?2) How does HTML code define the meaning of
content?
Structure and Recognition
1) Header2) Main Navigation3) Main Content4) Sidebar Content5) Footer
Sighted users see the visual placement of objects as "structure."
HTML Elements Have Meaning
1) <header> or <div role="banner">2) <nav> or <div role="navigation">3) <main> or <div role="main">4) <aside> or <div role="complementary">5) <footer> or <div role="footer">
Semantics within content
1) Headings - <h1>, <h2>, etc.2) Lists - <ul>, <ol>3) Forms and inputs - <form>, <input>, etc.4) Buttons - <button>, <input type="submit">5) Links - <a href="http://example.com">6) Tables - <table>
Separation of Content and Design
- CSS (Cascading Style Sheets) - Provides design for visual structures
- HTML- Provides semantics for non-visual structure
What is content without structure?
Just a run-on sentence.
Different Content has different needs
1) Text Content2) Images3) Audio and Video4) Interactive
Text Content
- Language- Abbreviations- Links- Headings- Lists
Images
1) Decorative Images2) Content Images3) Functional Images
Audio and Video
1) Transcripts2) Captioning3) Audio Description
Interactive Content
- Composite of all other types of content- Dynamic feedback and communication- ARIA: Accessible Rich Internet Applications
Making Good Choices
1) Design decisions and HTML choices should match.2) HTML creates meaning and relationships on the
page.3)What you see should be what you get.
