Update and rename ux-designer.md to designer.md (#783)

* Update and rename ux-designer.md to designer.md @dmundra I'd like to remove all of the accordions and add this content onto the page. I'm not seeing where the accordions are controlled though? * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Added role default layout to match guide. Added roles sidebar to role pages. Updated designer page to use new layout and redirect the old page. Updated roles landing page. * Deleted content-designer. --------- Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> Co-authored-by: Daniel Mundra <[email protected]> Co-authored-by: Daniel Mundra <[email protected]>
CivicActions · Sep 10, 2024 · 1ad3893 · 1ad3893
1 parent c3e4fd3
commit 1ad3893
Show file tree

Hide file tree

Showing 6 changed files with 126 additions and 52 deletions.
diff --git a/_data/roles.yml b/_data/roles.yml
@@ -3,40 +3,35 @@ docs:
 
 - title: Executive
   url: /executive
-  description: 
+  description:
   icon: <i class="fas fa-power-off fa-5x" aria-hidden="true"></i>
 
 - title: Procurement
   url: /procurement
-  description: 
+  description:
   icon: <i class="fas fa-power-off fa-5x" aria-hidden="true"></i>
 
 - title: Developer
   url: /developer
-  description: 
+  description:
   icon: <i class="fas fa-power-off fa-5x" aria-hidden="true"></i>
 
 - title: Product manager
   url: /product-manager
-  description: 
+  description:
   icon: <i class="fas fa-power-off fa-5x" aria-hidden="true"></i>
 
 - title: Project manager
   url: /project-manager
-  description: 
+  description:
   icon: <i class="fas fa-power-off fa-5x" aria-hidden="true"></i>
 
 - title: Operations
   url: /operations
-  description: 
+  description:
   icon: <i class="fas fa-power-off fa-5x" aria-hidden="true"></i>
 
-- title: UX designer
-  url: /ux-designer
-  description: 
+- title: Designer
+  url: /designer
+  description:
   icon: <i class="fas fa-power-off fa-5x" aria-hidden="true"></i>
-
-- title: Content designer
-  url: /content-designer
-  description: 
-  icon: <i class="fas fa-power-off fa-5x" aria-hidden="true"></i>
diff --git a/_layouts/role-default.html b/_layouts/role-default.html
@@ -0,0 +1,30 @@
+---
+layout: default
+main:
+class:
+---
+{% include breadcrumbs.html %}
+</div>
+<div class="guide-main">
+  <div class="">
+    <div class="grid-container">
+      <div class="grid-row grid-gap">
+        {% assign sidenav = site.data.navigation[page.sidenav] | default: page.sidenav %}
+        {% if sidenav %}
+        <div class="usa-layout-docs__sidenav desktop:grid-col-3{% if page.sticky_sidenav %} usa-sticky-sidenav{% endif %}">
+          {% include sidenav-roles.html links=sidenav %}
+        </div>
+        {% endif %}
+        <div class="usa-layout-docs anchor-links usa-layout-docs__main usa-prose{% if sidenav %} desktop:grid-col-9{% endif %}">
+          {% if page.title %}
+          <h1>{{ page.title }}</h1>
+          {% endif %}
+          <!-- content -->
+          {% include anchor_headings.html html=content anchorBody="<span aria-hidden='true'>
+                    <svg class='usa-icon' aria-hidden='true' focusable='false' role='img'><use xlink:href='/assets/uswds-icons/sprite.svg#link'></use></svg>
+                </span><span class='sr-only'>Anchor link</span>" anchorClass="anchor-link" anchorAttrs="aria-labelledby=%html_id%" h_max=3 %}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/_layouts/role.html b/_layouts/role.html
@@ -18,6 +18,12 @@
     <div class="">
         <div class="grid-container">
             <div class="grid-row grid-gap flex-align-start">
+                {% assign sidenav = site.data.navigation[page.sidenav] | default: page.sidenav %}
+                {% if sidenav %}
+                <div class="usa-layout-docs__sidenav desktop:grid-col-3{% if page.sticky_sidenav %} usa-sticky-sidenav{% endif %}">
+                    {% include sidenav-roles.html links=sidenav %}
+                </div>
+                {% endif %}
                 <div class="usa-layout-docs usa-layout-docs__main usa-prose{% if sidenav %} desktop:grid-col-9{% endif %}">
                     <div class="expand-all-accordion"><button class="expand usa-button" onClick='expandingAccordions(this)' aria-live="polite" aria-expanded="false" data-open="false">Expand All</button></div>
 

diff --git a/_roles/content-designer.md b/_roles/content-designer.md
diff --git a/_roles/designer.md b/_roles/designer.md
@@ -0,0 +1,81 @@
+---
+layout: role-default
+title: Designer
+description: Learn the accessibility roles of designers in product development, including UX design, visual design, and user research.
+excerpt: 
+sidenav: docs
+redirect_from:
+  - /roles/ux-designer
+  - /roles/content-designer
+categories:
+  - Design
+---
+
+The practice of design has an important role to play in moving accessibility thinking earlier in the product development process ("shifting left"). Design encompasses a wide variety of tasks and skills. Depending on their area of expertise, a designer could plan and write content, conduct research, or create visual mockups. These types of duties are usually broken down into three main categories.
+
+## User Experience (UX) Designer
+
+A UX designer focuses on how to best communicate information to users of their product. They improve accessibility by making content easy to understand. UX designers logically organize page content using headings and write in plain language to reduce cognitive load.  
+
+Duties for this role include defining information architecture, creating journey maps, planning content strategy, or writing content. 
+
+### Other titles for this role
+
+* Content Designer
+* Content Strategist
+* Information Architect
+* Service Designer
+* UX Writer
+
+### Accessibility resources for UX designers
+
+* [Accessibility for Everyone](https://abookapart.com/products/accessibility-for-everyone)
+* [Agile Accessibility Explained](https://www.amazon.com/Agile-Accessibility-Explained-sustainable-development/dp/1689182733/ref=sr_1_2?dchild=1&keywords=Agile+Accessibility+Explained&qid=1615337578&sr=8-2)
+* [Digital.gov Accessibility for UX Designers](https://digital.gov/guides/accessibility-for-teams/ux-design/#content-start)
+* [Digital.gov Accessibility for Content Designers](https://digital.gov/guides/accessibility-for-teams/content-design/#content-start)
+
+## User Researcher
+
+User researchers study user needs and behaviors. They can gather feedback from all users, including those that have disabilities and use assistive technology. This feedback can help guide decisions on how to make a product more accessible. 
+
+Duties for this role include conducting user interviews, testing designs for usability, and analyzing data collected from users. 
+
+### Other titles for this role
+
+* Experience Researcher
+* Human-Centered Researcher
+* Product Researcher
+
+### Accessibility resources for user researchers
+
+* [Nielsen Norman Group's How to Conduct Usability Studies for Accessibility](https://www.nngroup.com/reports/how-to-conduct-usability-studies-accessibility/)
+* [UK Department of Work and Pensions' User Research Accessibility Manual](https://accessibility-manual.dwp.gov.uk/guidance-for-your-job-role/user-researcher) 
+
+## Visual Designer
+
+Visual designers define how a product looks and feels. They create designs that are engaging and aesthetically distinct. To improve accessibility, they use colors that pass contrast requirements, consider visual layout and hierarchy, choose legible typefaces, and much more. 
+
+Duties for this role include designing mockups and prototypes, creating user flows, and establishing style guides. 
+
+### Other titles for this role
+
+* Graphic Designer
+* Interaction Designer
+* Product Designer
+* UI Designer
+* Web Designer 
+
+### Accessibility resources for visual designers
+
+* [DigitalA11y's Accessibility Tools and Resources for Designers](https://www.digitala11y.com/accessibility-tools-and-resources-for-designers/)
+* [Digital.gov's Accessibility for Visual Designers](https://digital.gov/guides/accessibility-for-teams/visual-design/#content-start)
+* [WAVE Browser Extensions](https://wave.webaim.org/extension/)
+
+## Next steps
+
+When you are ready to learn more, here are some further guides and resources that may help:
+
+* [Design Systems](https://accessibility.civicactions.com/guide/design)
+* [Plain Language](https://accessibility.civicactions.com/guide/plain-language)
+* [Trainings and Certifications](https://accessibility.civicactions.com/guide/training)
+
diff --git a/_roles/ux-designer.md b/_roles/ux-designer.md