{"data":{"prismic":{"blog_article":{"article_type":"Tech","title":[{"type":"heading1","text":"Accessible by design: building RHP's website","spans":[{"start":14,"end":20,"type":"strong"},{"start":31,"end":44,"type":"strong"}],"direction":"ltr"}],"summary_text":[{"type":"paragraph","text":"We built RHP’s website with accessibility at its core, supporting over 11,000 residents. Aimee breaks down the thinking and craft behind the work.","spans":[],"direction":"ltr"}],"seodescription":null,"seotitle":null,"author":{"__typename":"PRISMIC_Person","name":"Aimee Smith","job_title":"Software Engineer","profile_picture":null},"published":"2025-12-15","image":{"dimensions":{"width":1808,"height":1016},"alt":null,"copyright":null,"url":"https://images.prismic.io/greatstate/aUA5aHNYClf9oNVT_csherrro.jpg?auto=format,compress"},"programming_language":null,"singleAspectRatioImage":{"childImageSharp":{"fluid":{"aspectRatio":1.779527559055118,"src":"/static/5e037e837e127e462c9c4f357f1d81c4/d47f1/aUA5aHNYClf9oNVT_csherrro.jpg","srcSet":"/static/5e037e837e127e462c9c4f357f1d81c4/b5b92/aUA5aHNYClf9oNVT_csherrro.jpg 200w,\n/static/5e037e837e127e462c9c4f357f1d81c4/3ff6e/aUA5aHNYClf9oNVT_csherrro.jpg 400w,\n/static/5e037e837e127e462c9c4f357f1d81c4/d47f1/aUA5aHNYClf9oNVT_csherrro.jpg 800w,\n/static/5e037e837e127e462c9c4f357f1d81c4/86173/aUA5aHNYClf9oNVT_csherrro.jpg 1200w,\n/static/5e037e837e127e462c9c4f357f1d81c4/a5547/aUA5aHNYClf9oNVT_csherrro.jpg 1600w,\n/static/5e037e837e127e462c9c4f357f1d81c4/1bd97/aUA5aHNYClf9oNVT_csherrro.jpg 1808w","srcWebp":"/static/5e037e837e127e462c9c4f357f1d81c4/0c129/aUA5aHNYClf9oNVT_csherrro.webp","srcSetWebp":"/static/5e037e837e127e462c9c4f357f1d81c4/0e93d/aUA5aHNYClf9oNVT_csherrro.webp 200w,\n/static/5e037e837e127e462c9c4f357f1d81c4/2259f/aUA5aHNYClf9oNVT_csherrro.webp 400w,\n/static/5e037e837e127e462c9c4f357f1d81c4/0c129/aUA5aHNYClf9oNVT_csherrro.webp 800w,\n/static/5e037e837e127e462c9c4f357f1d81c4/45222/aUA5aHNYClf9oNVT_csherrro.webp 1200w,\n/static/5e037e837e127e462c9c4f357f1d81c4/1f191/aUA5aHNYClf9oNVT_csherrro.webp 1600w,\n/static/5e037e837e127e462c9c4f357f1d81c4/70720/aUA5aHNYClf9oNVT_csherrro.webp 1808w","sizes":"(max-width: 800px) 100vw, 800px","presentationWidth":800}}},"link":{"uid":"accessible-by-design-building-rhps-website"},"related_blogs":[{"blog":{"__typename":"PRISMIC_Blog_article","title":[{"type":"heading1","text":"New Collaboration: Great State and RHP Group","spans":[{"start":4,"end":17,"type":"strong"},{"start":35,"end":44,"type":"strong"}],"direction":"ltr"}],"summary_text":[{"type":"paragraph","text":"After four brilliant years of collaboration with RHP Group, they've selected us to support them in the next phase of work in their transformation roadmap! Read more here.","spans":[],"direction":"ltr"}],"author":{"__typename":"PRISMIC_Person","name":"Great State","job_title":null},"thumbnail":{"dimensions":{"width":1808,"height":1016},"alt":null,"copyright":null,"url":"https://images.prismic.io/greatstate/Z8WIIRsAHJWomDBn_Group14859.png?auto=format,compress"},"article_type":"News","published":"2025-03-05","link":{"uid":"new-collaboration-great-state-and-rhp-group"},"image":{"dimensions":{"width":1808,"height":1016},"alt":null,"copyright":null,"url":"https://images.prismic.io/greatstate/Z8WIIRsAHJWomDBn_Group14859.png?auto=format,compress"},"_meta":{"uid":"new-collaboration-great-state-and-rhp-group"}}},{"blog":{"__typename":"PRISMIC_Blog_article","title":[{"type":"heading1","text":"Behind the craft: creating the gold standard for Longleat","spans":[{"start":31,"end":44,"type":"strong"},{"start":49,"end":57,"type":"strong"}],"direction":"ltr"}],"summary_text":[{"type":"paragraph","text":"We transformed Longleat’s digital experience into an immersive, award-winning journey grounded in real insight and bold craft. Learn about how we did this.","spans":[],"direction":"ltr"}],"author":{"__typename":"PRISMIC_Person","name":"Matt Powell","job_title":"Creative Director"},"thumbnail":{"dimensions":{"width":1808,"height":1016},"alt":null,"copyright":null,"url":"https://images.prismic.io/greatstate/aTFVx3NYClf9nzp3_LONGLEATBTS.png?auto=format,compress"},"article_type":"News","published":"2025-12-04","link":{"uid":"behind-the-craft-creating-the-gold-standard-for-longleat"},"image":{"dimensions":{"width":1808,"height":1016},"alt":null,"copyright":null,"url":"https://images.prismic.io/greatstate/aTFVx3NYClf9nzp3_LONGLEATBTS.png?auto=format,compress"},"_meta":{"uid":"behind-the-craft-creating-the-gold-standard-for-longleat"}}},{"blog":{"__typename":"PRISMIC_Blog_article","title":[{"type":"heading1","text":"Charitable choices: Using digital to cultivate support","spans":[{"start":11,"end":18,"type":"strong"},{"start":26,"end":33,"type":"strong"},{"start":47,"end":54,"type":"strong"}],"direction":"ltr"}],"summary_text":[{"type":"paragraph","text":"Charities need to successfully build connections with the public to cultivate support. It takes time to do so, and its a complicated process, but digital can sit at the heart of your strategy.","spans":[],"direction":"ltr"}],"author":{"__typename":"PRISMIC_Person","name":"Helen Evans","job_title":"Lead Strategist"},"thumbnail":{"dimensions":{"width":1808,"height":1016},"alt":null,"copyright":null,"url":"https://images.prismic.io/greatstate/ZxdgL4F3NbkBXy7c_7.png?auto=format,compress"},"article_type":"Opinion","published":"2024-10-22","link":{"uid":"charitable-choices-using-digital-to-cultivate-supp"},"image":{"dimensions":{"width":1808,"height":1016},"alt":null,"copyright":null,"url":"https://images.prismic.io/greatstate/ZxdgL4F3NbkBXy7c_7.png?auto=format,compress"},"_meta":{"uid":"charitable-choices-using-digital-to-cultivate-supp"}}}],"body":[{"__typename":"PRISMIC_Blog_articleBodyText","type":"text","primary":{"text":[{"type":"paragraph","text":"Accessibility isn’t a checkbox; it’s good design, done right. Aimee, our Software Engineer at Great State, is the code wrangler behind RHP’s new digital platform. Together with a cross-functional team spanning strategy, UX, and creative, she’s had the pleasure of bringing the thinking to life, building RHP’s new digital experience.","spans":[{"start":0,"end":163,"type":"strong"}],"direction":"ltr"},{"type":"paragraph","text":"The site serves more than 11,000 residents in South West London who are managing their homes, many of whom visit during moments of stress or urgency to pay rent, report repairs, or access support. The challenge? Make the platform intuitive, reliable, and inclusive for everyone, while ensuring users could get what they needed quickly and get back to their day.","spans":[],"direction":"ltr"},{"type":"paragraph","text":"Take it away, Aimee, and tell us all about the process behind crafting something that actually benefits its users on a day to day basis.","spans":[{"start":86,"end":95,"type":"em"}],"direction":"ltr"}]}},{"__typename":"PRISMIC_Blog_articleBodyContent_width_image","type":"content_width_image","primary":{"caption":null,"content_width_image":{"dimensions":{"width":1600,"height":900},"alt":null,"copyright":null,"url":"https://images.prismic.io/greatstate/aN5TgZ5xUNkB1Z16_Inbodyimage-2-.jpg?auto=format,compress"},"content_width_imageSharp":{"childImageSharp":{"fluid":{"aspectRatio":1.7777777777777777,"src":"/static/9a63672bece29a9e262ec1d0863874a0/e3107/aN5TgZ5xUNkB1Z16_Inbodyimage-2-.jpg","srcSet":"/static/9a63672bece29a9e262ec1d0863874a0/b754d/aN5TgZ5xUNkB1Z16_Inbodyimage-2-.jpg 320w,\n/static/9a63672bece29a9e262ec1d0863874a0/4dbff/aN5TgZ5xUNkB1Z16_Inbodyimage-2-.jpg 640w,\n/static/9a63672bece29a9e262ec1d0863874a0/e3107/aN5TgZ5xUNkB1Z16_Inbodyimage-2-.jpg 1280w,\n/static/9a63672bece29a9e262ec1d0863874a0/a5547/aN5TgZ5xUNkB1Z16_Inbodyimage-2-.jpg 1600w","srcWebp":"/static/9a63672bece29a9e262ec1d0863874a0/80f20/aN5TgZ5xUNkB1Z16_Inbodyimage-2-.webp","srcSetWebp":"/static/9a63672bece29a9e262ec1d0863874a0/c172f/aN5TgZ5xUNkB1Z16_Inbodyimage-2-.webp 320w,\n/static/9a63672bece29a9e262ec1d0863874a0/c03cf/aN5TgZ5xUNkB1Z16_Inbodyimage-2-.webp 640w,\n/static/9a63672bece29a9e262ec1d0863874a0/80f20/aN5TgZ5xUNkB1Z16_Inbodyimage-2-.webp 1280w,\n/static/9a63672bece29a9e262ec1d0863874a0/1f191/aN5TgZ5xUNkB1Z16_Inbodyimage-2-.webp 1600w","sizes":"(max-width: 1280px) 100vw, 1280px","presentationWidth":1280}}}}},{"__typename":"PRISMIC_Blog_articleBodyText","type":"text","primary":{"text":[{"type":"heading2","text":"Why accessibility matters","spans":[],"direction":"ltr"},{"type":"paragraph","text":"For me, accessibility isn’t just a set of rules – it’s empathy in action, expressed in HTML, CSS, and just the right drop of JavaScript. Whether someone’s navigating with a screen reader, viewing a webpage on mobile, or trying to jab their way through forms like a speed runner, I want the experience to feel smooth, intuitive, and delightful. ","spans":[],"direction":"ltr"},{"type":"paragraph","text":"In short, my mission is clear: build a site that works for its users, with no excuses. ","spans":[],"direction":"ltr"},{"type":"paragraph","text":"However, the WebAIM Million 2025 report paints a stark picture: the average homepage contains 51 accessibility errors, and more than 96% of the world’s top one million web pages are not accessible. By overlooking accessibility needs, organisations risk excluding 16% of the global population, which equates to around 1.3 billion people. It’s a clear reminder of how essential accessibility compliance is, not only to meet standards but to avoid shutting out a significant portion of potential users. ","spans":[{"start":13,"end":39,"type":"hyperlink","data":{"link_type":"Web","url":"https://webaim.org/projects/million/","target":"_blank"}}],"direction":"ltr"},{"type":"paragraph","text":"These aren’t obscure edge cases; they’re fundamentals like missing alt text or poor colour contrast. Many teams know accessibility is important but don’t know where to start. Or they assume it requires specialist skills and endless hours of resources. ","spans":[],"direction":"ltr"},{"type":"paragraph","text":"For RHP, accessibility was central to their brief. This project became more than a technical rebuild – it was an opportunity to reimagine the digital experience, build trust, and empower residents to self-serve confidently. As some users accessing the website had low digital literacy or limited English, user journeys had to be clear and well-signposted.","spans":[],"direction":"ltr"},{"type":"heading2","text":"Collaboration first","spans":[],"direction":"ltr"},{"type":"paragraph","text":"Accessibility isn’t a developer-only problem. It requires collaboration across the entire project team. From clear acceptance criteria set by the business’ analysts to rigorous testing by Quality Assurance, and ongoing awareness from content editors when adding elements.","spans":[],"direction":"ltr"},{"type":"paragraph","text":"Plus, designers consider colour contrasts, typefaces and motion from the start. This cross-functional approach makes technical implementation smoother and helps accessibility become part of the culture, not just a checklist.","spans":[],"direction":"ltr"},{"type":"heading2","text":"Building accessibility: HTML, forms, and interactions ","spans":[{"start":0,"end":54,"type":"strong"}],"direction":"ltr"},{"type":"paragraph","text":"The foundation of RHP’s site is semantic HTML. We built the future-ready platform using the capabilities of Umbraco Heartcore, as this headless CMS provided us with flexibility, scalability, and full editorial control. ","spans":[{"start":60,"end":125,"type":"hyperlink","data":{"link_type":"Web","url":"https://umbraco.com/case-studies-testimonials/rhp/","target":"_blank"}}],"direction":"ltr"},{"type":"paragraph","text":"Instead of generic <div> elements, we used elements that accurately describe content: <header>, <nav>, <button>, <main>. These choices automatically provide keyboard navigation, screen reader support, and navigational landmarks, without extra development time. ","spans":[],"direction":"ltr"},{"type":"paragraph","text":"Heading structures were clearly defined: the hero component always contains the <h1> at the top, with other sections using <h2> and nested <h3>/<h4> as needed. This ensures screen reader users can scan the page efficiently. ","spans":[],"direction":"ltr"},{"type":"paragraph","text":"Keyboard accessibility was a priority. Native elements like <a>, <button>, and <input> handle this by default, while custom components used tabindex, focus styles, and ARIA roles to ensure all interactions were accessible. Tab order follows the DOM, avoiding CSS positioning tricks, focus leaks from modals, or off-screen navigation issues. ","spans":[],"direction":"ltr"},{"type":"paragraph","text":"Forms are mission critical. Using Ark UI, a headless component library, allowed custom styling while keeping accessibility intact. Labels, fieldsets, legends, and help/error text are screen reader-friendly and visible, giving residents confidence to interact independently.","spans":[],"direction":"ltr"},{"type":"heading2","text":"Images, motion and mobile ","spans":[],"direction":"ltr"},{"type":"paragraph","text":"Umbraco Heartcore didn’t include alt text fields by default, so we extended the CMS, updated the front-end to consume them, and trained editors to use them consistently. Now screen readers, slow connections, and search engines all get the message. ","spans":[],"direction":"ltr"},{"type":"paragraph","text":"Animation can add clarity or cause confusion. For RHP, we kept motion minimal and purposeful. Transitions highlight interactivity without being distracting, and anything that remains is user-triggered. This all added to a calmer experience and reduced unnecessary movement for the user. ","spans":[],"direction":"ltr"},{"type":"paragraph","text":"Mobile accessibility was another focus. Touch targets meet the recommended 44x44 pixels, and we used invisible hit zones where smaller elements were required. Layouts use relative units, so text and components scale smoothly when zoomed up to 200%. Fixed positioning and horizontal scrolling were avoided, and zooming is never disabled, ensuring low vision users can comfortably navigate the site. ","spans":[],"direction":"ltr"},{"type":"paragraph","text":"The result is a site that works reliably and clearly, whether you’re on desktop, tablet, or mobile. Every image, animation, and interaction was designed to be intuitive and accessible, without compromising the visual experience. ","spans":[{"start":183,"end":185,"type":"strong"}],"direction":"ltr"},{"type":"heading2","text":"Results speak a thousand words ","spans":[],"direction":"ltr"},{"type":"paragraph","text":"The effort paid off. RHP’s website achieved a high accessibility score, demonstrating the impact of deliberate, thoughtful implementation. Engagement metrics show the redesign is making a real difference: ","spans":[],"direction":"ltr"},{"type":"list-item","text":"Help and advice engagement averaged 88.2%, 19.5% higher than the website average. This means users are finding content relevant and usable. ","spans":[],"direction":"ltr"},{"type":"list-item","text":"Form submissions decreased by 60%, while file downloads rose 98%, showing residents are successfully self-serving. ","spans":[],"direction":"ltr"},{"type":"list-item","text":"Exit rate in help and advice was 25%, indicating users leave after completing tasks, not due to frustration. ","spans":[],"direction":"ltr"},{"type":"paragraph","text":"Beyond these numbers, accessibility improvements also brought cleaner code, better SEO, faster performance, and a site that’s easier to maintain. ","spans":[],"direction":"ltr"},{"type":"heading2","text":"Continuous improvement ","spans":[],"direction":"ltr"},{"type":"paragraph","text":"Accessibility isn’t a finish line; it’s a mindset. Every improvement removes barriers, creating a digital experience that’s inclusive, efficient, and human-centered. ","spans":[],"direction":"ltr"},{"type":"paragraph","text":"At RHP, accessibility isn’t an afterthought - it’s embedded in the design, development, and content process. It’s a commitment to residents, and one that will continue to evolve as the site grows and their needs change. ","spans":[],"direction":"ltr"},{"type":"paragraph","text":"Looking to give your website or project the accessibility touch it deserves? Get in touch with us at hello@greatstate.co and we can begin mapping out your roadmap today. ","spans":[],"direction":"ltr"}]}}],"_meta":{"uid":"accessible-by-design-building-rhps-website"}}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"rootQuery":"\n  query PrismicBlogArticleByDocumentID($uid: String!) {\n    prismic {\n      blog_article(uid: $uid, lang: \"en-gb\") {\n        ...prismicBlogArticleFields\n      }\n    }\n  }\n","id":"aUAaAhEAAC4A-JIp","lang":"en-gb","uid":"accessible-by-design-building-rhps-website","alternateLanguages":[]}}