The document discusses making web content accessible to all users. It explains that accessibility involves both semantics, or constructing meaning through structure using HTML elements, and alternatives, providing content in different formats. Key points covered include using proper HTML elements to define headings, lists, forms, and other structures; separating content from design with CSS; and ensuring all content types like text, images, audio and interactive elements are accessible. The goal is for users of assistive technologies to understand the meaning and relationships of content in the same way sighted users see visual structure.

1. If you build it,
they will come.
But will they be able to use it?

2. What is "accessible" online?

3. 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.

4. Semantics and Structure
1) What is "meaning" in code?
2) How does HTML code define the meaning of content?

5. Structure and Recognition
1) Header
2) Main Navigation
3) Main Content
4) Sidebar Content
5) Footer

6. Sighted users
see the visual
placement of
objects as
"structure."

7. 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">

8. 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>

9. Separation of Content and Design
- CSS (Cascading Style Sheets)
- Provides design for visual structures
- HTML
- Provides semantics for non-visual structure

10. What is content without
structure?

11. Just a run-on sentence.

12. Different Content has different needs
1) Text Content
2) Images
3) Audio and Video
4) Interactive

13. Text Content
- Language
- Abbreviations
- Links
- Headings
- Lists

14. Images
1) Decorative Images
2) Content Images
3) Functional Images

15. Audio and Video
1) Transcripts
2) Captioning
3) Audio Description

16. Interactive Content
- Composite of all other types of content
- Dynamic feedback and communication
- ARIA: Accessible Rich Internet Applications

17. 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.

18. Contact Me
Joe Dolson
https://www.joedolson.com
joe@joedolson.com