How does this work?
The key to a lot of this is leveraging using tables
with a role="presentation" attribute
to make decorated sections without css. If you view
source on the page, you'll see that there are a LOT
of tables. The table tag typically is used to display
tabular data and should NOT be used as a layout method.
However, since I am not allowed to use CSS, I am
pretty much exclusively relying on tables for this purpose.
The presentation role tells the browser to not expose
the table and its tabluar children in the accessibility
tree. This will make it easier to navigate for assistive
technology.
I'm also leveraging some deprecated HTML elements
from HTML 3.2 that you should never use. In order
to be "compliant", I've added the HTML 3.2 doctype
at the top of the page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
This helps give a hint to the browser that we are
going to use some older stuff.
HOWEVER, I'm also using some newer things such as
details/summary,
section, main, header,
and footer. So I'm just making a mess of my doctype
and what I should be actually using!
