HTML Changes Planned for Accessibility Aug. 15

Updated August 9, 2018

To improve keyboard accessibility, the tab order of links and navigation on all UBCMS pages and the ability to skip navigation links when tabbing will be updated. Sites with custom coding MAY be affected.

Changes to UBCMS system-wide HTML are planned for Wednesday, August 15

Wednesday morning, August 15, we plan to make a change to UBCMS sites to improve keyboard accessibility. The change will improve the tab order of links and navigation on the page and the ability to skip navigation links when tabbing.

We expect no noticeable changes for sites with no HTML, CSS, or Javascript customizations.

To achieve the accessibility improvement, we are changing the order HTML for page columns is output from the server. The HTML for the left column containing the left navigation used to be output last, after the center and right columns, but will now be output first, generally keeping intact a consistent top-to-bottom, left-to-right flow in both the HTML source and the visible page. We are changing the CSS accordingly so there will be no visible difference.

Warning to sites with custom coding

In the past, changes to the HTML of the page like this have triggered issues for a small number of sites with HTML, CSS, or Javascript customizations sensitive to the specifics of this kind of change.  We encourage testing to prevent unforeseen side effects.

In the past, changes to the HTML of the page like this have triggered issues for a small number of sites with customizations sensitive to the specifics of this kind of change. So we are announcing this change now, and the ability to test now in our QA environment if you feel it is necessary. The full details of the change are also listed below. I expect that most HTML snippets, custom CSS, Javascript and analytics triggers will not be affected, but they could be.

To access the QA environment for testing, you must be on the UB network OR connected to the UB VPN, and can use the following URLs:

*Author*: 

*Published sites:*

(*) In all cases, there is a thin orange bar inserted at the top of the page in QA.

Details of the change:

  • <div id="left"> and its content used to appear after the closing of <div id="center"> or <div id="right"> but will now appear immediately before <div id="center"> or <div id="banner">.
  • <div id="skip-to-content"></div> is in a different spot
  • CSS of .page #columns #right, .page #columns #center and similar has been adjusted to preserve original layout