Demystifying Single Page Applications: Features, Benefits, and Challenges

Slide Note

Single Page Applications (SPAs) are a modern approach to web development that offer dynamic page rewriting, fast loading times, and seamless user experiences. Popular frameworks like Angular, React, Ember, Vue.js, and more empower developers to create SPAs efficiently. Despite their advantages, SPAs require specialized knowledge for accessibility and proper element structuring. This article explores the essence of SPAs, their significance, and considerations for effective implementation.

coniglio_k Follow

Uploaded on Oct 04, 2024 | 0 Views

Download Presentation

Please find below an Image/Link to download the presentation.

The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.

E N D

Presentation Transcript

Single Page Applications andreas.jacobsen@funka.com kristian.simonsen@funka.com

Andreas Jacobsen Accessibility consultant Masters degree in universal design of ICT Web developer Tutor Auditor IAAP CPWA certified

Kristian Munter Simonsen Accessibility consultant Masters degree in universal design of ICT Web developer Tutor Auditor IAAP CPWA certified

What are SPAs? Angular React Dynamically rewrites pages Can load entire website or parts at a time Never reloads Everything is in one page Common frameworks create SPA s Ember Vue.js Svelte Gatsby.js Next.js

Why SPAs? Modern and cool. Creates fast websites. Seamless page change. NPM packages for frameworks. Easy caching Mature publishing platforms

Compatibility Most frameworks are compatibel with the HTML5 standard Supports all ARIA-tags Can be wrapped in any element Comprehensive documentation

What is the problem? "With great power there must also come great responsibility Spider Man Accessibility in SPA frameworks require specialized knowledge

SPA and <div> Elements required to be wrapped Tutorials often use <div> when other elemts should be used

Examples Business wants a table written in React You have been assigned to created it No time for React training has been approved.

Examples, bad //Column.js const Columns = () => { return( <div> <td>data</td> <td>data</td> </div> ) } // App.js function App() { return ( <div> <Table /> </div> ); } //Table.js const Table = () => { return ( <table> <tr> <Columns /> </tr> </table> ) }

Examples, bad <div> <div> <table> <tr> <div> <td>data</td> <td>data</td> </div> </tr> </table> </div> </div>

Lets validate our code

Examples, good. React.Fragment //Table.sj class Table extends React.Component { render() { return ( <table> <tr> <Columns /> </tr> </table> ); } } //Column.js class Columns extends React.Component { render() { return ( <> <td>data</td> <td>data</td> </> ); } } // App.js function App() { return ( <div> <Table /> </div> ); } Code from reactjs.org/docs/fragment

Examples, good <div id="root"> <div> <table> <tr> <td>data</td> <td>data</td> </tr> </table> </div> </div> Code from reactjs.org/docs/fragment

NPM packages can help NPM packages can make it easier to solve common issues

Titles made easy class FAD extends React.Component { render() { return ( <> <Helmet> <title>FAD</title> </Helmet> <main> <p> React Helmet allows you to easily change content in the head of your files, like changing title. </p> </main> </> ); } }

Remember to make useful titles const IndexPage = () => { return( <Layout> <SEO title="Home"/> ) ...

Remember to make useful titles module.exports = { title: "Funka", titleTemplate: "%s | Funka ", description: "A test site", siteUrl: "https://example.com", image: "/images/funka_logo.png",

Remember to make useful titles

Routing SPA s don t have pages Routing is usually loading new content into the same page Manually inform users of change Manually move focus using things like this.content.focus

Routing, manual focus, example componentDidMount() { // You can also set title here this.content.focus(); } render() { return ( <main> {/*Tabindex -1 to allow us to programatically set focus on a non-focusable element*/} <h1 tabIndex="-1" ref={( content ) => { this.content = content; }}> Your headline here</h1> </main> ); }

Routing, example const Loaded = (props) => ( <span aria-live="polite" aria-atomic="true" role="status > {props.text} </span> ); componentDidMount() { this.content.focus(); this.setState( { text: 'About Funka page loaded'} ); } <main> <SEO title="About FAD"/> <Loaded text={this.state.text} /> <h1 tabIndex="-1" ref={( content ) => { this.content = content; }}>Your headline here</h1> </main>

Routing We have now gone from a route giving no info to screenreaders to: Focus is set on newly loaded content User is told when a new page has loaded Title is set

ARIA-live and React Aria-live announces changes Works for content loaded at render Context API makes passing data easier Aria-messages created at dispatch time may fail

ARIA-live and React First load ARIA-messages Set them to be hidden Set them to be visible when you call them Not all screen readers equally affected Context API helps share states Test with multiple screen readers

Focus SPA s require extra focus on focus management. Always test focus, especially with dynamic content.

Tabindex focus Set tabindex -1 Focus the first heading or <main>

What? Tabindex -1? Resets tab-order Makes non-focusable elements focusable using JS Not all screen readers equally affected

Notify users of change Funka s audits show a lack of notice of change. New pages fail to annonce being pages Buttons and forms provide no notification of change Expandable elements fail to notify of expandibility

The good old days Example.com is server rendered Assistive technology sees what is a new page Form submissions reload the page No modal windows Buttons are coded as buttons Links are coded as links

The new days (bad case) example.com is a single page application Assistive technology is not informed of page changes Modal windows that fail to trap focus. Modal windows that fail to announce themselves Form erros are not announced by the screen reader Over use of ARIA-tags or no use of aria tags. Buttons are coded as links and wise versa.

Why Poor accessibility documentation Lack of training Deadlines Autonumous teams Freedom Lack of requirments and testing methodology

Documentation is king? Documentation is essential to anyone who is interested in new technologies But how well is accessibility documentation of some of most popular frameworks? Lets look at the documentation for some modern frameworks and see how they conform to 4.1.2 & 4.1.3

Let's look at 4.1.2 & 4.1.3 Success Criterion 4.1.2 Name, Role, Value (A) For all user interface components (including but not limited to: components generated by scripts) notification of changes to these items is available to user agents, including assistive technologies. Success Criterion 4.1.3 Status Messages (AA) In content implemented using markup languages, status messages can be programmatically determined through role or properties such that they can be presented to the user by assistive technologies without receiving focus.

React docs example function UserGreeting(props) { return <h1>Welcome back!</h1>; } function GuestGreeting(props){ return <h1>Please sign up.</h1>; } function Greeting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return <UserGreeting />; } return <GuestGreeting />; } function LoginButton(props) { return <button onClick={props.onClick}> Login </button>; } function LogoutButton(props) { return <button onClick={props.onClick}> Logout </button>; }

Is Vue any better? <div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been clicked {{ counter }} times.</p> </div>

What about Angular? @Component({ template: ` <div class="job-ad"> <h4>{{data.headline}}</h4> {{data.body}} </div> ` })

Where to look? Accessibility | React Angular | Accessibility in Angular Vue

This is why you cannot As a developer: expect that the standard documentation is enough As a manager or a customer: expect that your developers is going to create accessible code in new technologies on their own As an architect: believe that all new technologies are documented with international standards in mind.

Ok So what can we do?

Start with solid building blocks Inspect your building blocks Is there any documentation? Is the documentation sufficient? Does your design systems encourage building accessible solutions?

A good example from GOV.UK

A good example from GOV.UK Feedback and contact information Compliance status Non-accessible content How this website has been tested for accessibility