OpenListTeam · baich110 · Jul 16, 2026 · Jul 16, 2026 · Jul 16, 2026 · Jul 16, 2026
diff --git a/index.html b/index.html
@@ -31,6 +31,7 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
+    <a href="#main-content" class="skip-link" style="position:absolute;left:-9999px;top:0;z-index:9999;">Skip to main content</a>
     <div id="root"></div>
 
     <script src="/src/main.tsx" type="module"></script>

diff --git a/src/app/App.tsx b/src/app/App.tsx
@@ -73,6 +73,7 @@ const App: Component = () => {
           left="0"
           right="0"
           zIndex="$banner"
+          aria-hidden="true"
           d={isRouting() ? "block" : "none"}
         >
           <ProgressIndicator />

diff --git a/src/components/FullLoading.tsx b/src/components/FullLoading.tsx
@@ -3,7 +3,7 @@ import { JSXElement, mergeProps, Show } from "solid-js"
 import { getMainColor } from "~/store"
 export const FullScreenLoading = () => {
   return (
-    <Center h="100vh">
+    <Center h="100vh" role="status" aria-busy="true" aria-label="Loading">
       <Spinner
         thickness="4px"
         speed="0.65s"
@@ -14,7 +14,6 @@ export const FullScreenLoading = () => {
     </Center>
   )
 }
-
 export const FullLoading = (props: {
   py?: string
   size?: string
@@ -30,7 +29,7 @@ export const FullLoading = (props: {
     props,
   )
   return (
-    <Center ref={props.ref} h="$full" w="$full" py={merged.py}>
+    <Center ref={props.ref} h="$full" w="$full" py={merged.py} role="status" aria-busy="true" aria-label="Loading">
       <Spinner
         thickness={`${merged.thickness}px`}
         speed="0.65s"

diff --git a/src/components/SwitchColorMode.tsx b/src/components/SwitchColorMode.tsx
@@ -23,6 +23,8 @@ const SwitchColorMode = () => {
       boxSize={icon().size}
       as={icon().component}
       onClick={toggleColorMode}
+      aria-label="Toggle color mode"
+      tabIndex={0}
       p={icon().p}
     />
   )

diff --git a/src/pages/home/Layout.tsx b/src/pages/home/Layout.tsx
@@ -1,3 +1,4 @@
+import { Box } from "@hope-ui/solid"
 import { Markdown } from "~/components"
 import { useTitle } from "~/hooks"
 import { getSetting } from "~/store"
@@ -17,7 +18,9 @@ const Index = () => {
     <>
       <Header />
       <Toolbar />
-      <Body />
+      <Box as="main" role="main" id="main-content">
+        <Body />
+      </Box>
       <Footer />
     </>
   )

diff --git a/src/pages/home/Nav.tsx b/src/pages/home/Nav.tsx
@@ -55,7 +55,7 @@ export const Nav = () => {
   })
 
   return (
-    <Breadcrumb {...stickyProps} background="$background" class="nav" w="$full">
+    <Breadcrumb {...stickyProps} background="$background" class="nav" role="navigation" aria-label={t("global.breadcrumb")} w="$full">
       <For each={paths()}>
         {(name, i) => {
           const isLast = createMemo(() => i() === paths().length - 1)

diff --git a/src/pages/home/Password.tsx b/src/pages/home/Password.tsx
@@ -36,6 +36,7 @@ const Password = (props: PasswordProps) => {
       <Input
         autofocus={true}
         type="password"
+        aria-label={props.title}
         value={props.password()}
         background={useColorModeValue("$neutral3", "$neutral2")()}
         onKeyDown={(e) => {

diff --git a/src/pages/home/folder/GridItem.tsx b/src/pages/home/folder/GridItem.tsx
@@ -3,7 +3,7 @@ import { Motion } from "solid-motionone"
 import { useContextMenu } from "solid-contextmenu"
 import { batch, Show } from "solid-js"
 import { CenterLoading, LinkWithPush, ImageWithError } from "~/components"
-import { usePath, useRouter, useUtil } from "~/hooks"
+import { usePath, useRouter, useT, useUtil } from "~/hooks"
 import { checkboxOpen, getMainColor, local, selectIndex } from "~/store"
 import { ObjType, StoreObj } from "~/types"
 import { bus, hoverColor } from "~/utils"
@@ -16,6 +16,7 @@ export const GridItem = (props: { obj: StoreObj; index: number }) => {
     return null
   }
   const { setPathAs } = usePath()
+  const t = useT()
   const objIcon = (
     <Icon
       color={getMainColor()}
@@ -40,6 +41,9 @@ export const GridItem = (props: { obj: StoreObj; index: number }) => {
         classList={{ selected: !!props.obj.selected }}
         class="grid-item viselect-item"
         data-index={props.index}
+        role="listitem"
+        aria-label={`${props.obj.name}，${props.obj.is_dir ? t("global.folder") : t("global.file")}`}
+        tabIndex={0}
         w="$full"
         p="$1"
         spacing="$1"
@@ -102,6 +106,7 @@ export const GridItem = (props: { obj: StoreObj; index: number }) => {
               pos="absolute"
               left="$1"
               top="$1"
+              aria-label={t("global.select") + " " + props.obj.name}
               // colorScheme="neutral"
               on:mousedown={(e: MouseEvent) => {
                 e.stopPropagation()
@@ -121,6 +126,7 @@ export const GridItem = (props: { obj: StoreObj; index: number }) => {
               maxW="$full"
               rounded="$lg"
               shadow="$md"
+              alt={props.obj.name}
               fallback={<CenterLoading size="lg" />}
               fallbackErr={objIcon}
               src={props.obj.thumb}

diff --git a/src/pages/home/folder/List.tsx b/src/pages/home/folder/List.tsx
@@ -78,6 +78,9 @@ export const ListTitle = (props: {
       color: "$neutral11",
       textAlign: col.textAlign as any,
       cursor: "pointer",
+      role: "button",
+      tabIndex: 0,
+      "aria-label": `${t(`home.obj.${col.name}`)}, ${reverse() ? t("global.descending") : t("global.ascending")}`,
       onClick: () => {
         if (col.name === orderBy()) {
           setReverse(!reverse())
@@ -97,6 +100,7 @@ export const ListTitle = (props: {
           <ItemCheckbox
             checked={allChecked()}
             indeterminate={isIndeterminate()}
+            aria-label={t("home.toolbar.select_all")}
             onChange={(e: any) => {
               selectAll(e.target.checked as boolean)
             }}
@@ -157,6 +161,7 @@ const ListLayout = () => {
       onDragOver={onDragOver}
       oncapture:contextmenu={captureContentMenu}
       class="list viselect-container"
+      role="list"
       w="$full"
       spacing="$1"
     >

diff --git a/src/pages/home/folder/ListItem.tsx b/src/pages/home/folder/ListItem.tsx
@@ -10,7 +10,7 @@ import { Motion } from "solid-motionone"
 import { useContextMenu } from "solid-contextmenu"
 import { batch, Show } from "solid-js"
 import { LinkWithPush } from "~/components"
-import { usePath, useRouter, useUtil } from "~/hooks"
+import { usePath, useRouter, useT, useUtil } from "~/hooks"
 import {
   checkboxOpen,
   getMainColor,
@@ -53,6 +53,7 @@ export const ListItem = (props: { obj: StoreObj; index: number }) => {
   const { setPathAs } = usePath()
   const { show } = useContextMenu({ id: 1 })
   const { pushHref, to } = useRouter()
+  const t = useT()
   const { openWithDoubleClick, toggleWithClick, restoreSelectionCache } =
     useSelectWithMouse()
   const filenameStyle = () => local["list_item_filename_overflow"]
@@ -69,6 +70,9 @@ export const ListItem = (props: { obj: StoreObj; index: number }) => {
         classList={{ selected: !!props.obj.selected }}
         class="list-item viselect-item"
         data-index={props.index}
+        role="listitem"
+        aria-label={`${props.obj.name}，${getFileSize(props.obj.size)}，${props.obj.is_dir ? t("global.folder") : t("global.file")}，${formatDate(props.obj.modified)}`}
+        tabIndex={0}
         w="$full"
         p="$2"
         rounded="$lg"
@@ -114,6 +118,7 @@ export const ListItem = (props: { obj: StoreObj; index: number }) => {
           <Show when={checkboxOpen()}>
             <ItemCheckbox
               // colorScheme="neutral"
+              aria-label={t("global.select") + " " + props.obj.name}
               on:mousedown={(e: MouseEvent) => {
                 e.stopPropagation()
               }}

diff --git a/src/pages/home/folder/context-menu.tsx b/src/pages/home/folder/context-menu.tsx
@@ -52,11 +52,13 @@ export const ContextMenu = () => {
       animation="scale"
       theme={colorMode() !== "dark" ? "light" : "dark"}
       style="z-index: var(--hope-zIndices-popover)"
+      aria-label={t("home.toolbar.more")}
     >
       <For each={["rename", "move", "copy", "delete"] as const}>
         {(name) => (
           <Item
             hidden={!userCan(name) || !objStore.write || isShare()}
+            aria-label={t(`home.toolbar.${name}`)}
             onClick={() => {
               bus.emit("tool", name)
             }}
@@ -67,6 +69,7 @@ export const ContextMenu = () => {
       </For>
       <Item
         hidden={!userCan("share") || isShare()}
+        aria-label={t("home.toolbar.share")}
         onClick={() => {
           bus.emit("tool", "share")
         }}
@@ -83,6 +86,7 @@ export const ContextMenu = () => {
             selectedObjs().some((o) => !isArchive(o.name))
           )
         }}
+        aria-label={t("home.toolbar.decompress")}
         onClick={() => {
           bus.emit("tool", "decompress")
         }}

diff --git a/src/pages/home/header/Header.tsx b/src/pages/home/header/Header.tsx
@@ -35,6 +35,7 @@ export const Header = () => {
       {...stickyProps}
       bgColor="$background"
       class="header"
+      role="banner"
       w="$full"
       // shadow="$md"
     >

diff --git a/src/pages/home/toolbar/BackTop.tsx b/src/pages/home/toolbar/BackTop.tsx
@@ -48,6 +48,8 @@ export const BackTop = () => {
           p="$1"
           rounded="$lg"
           as={FiArrowUp}
+          aria-label="Back to top"
+          tabIndex={0}
           onClick={() => {
             window.scrollTo({ top: 0, behavior: "smooth" })
           }}

diff --git a/src/pages/home/toolbar/Icon.tsx b/src/pages/home/toolbar/Icon.tsx
@@ -18,6 +18,8 @@ export const CenterIcon = <C extends ElementType = "svg">(
     <Tooltip placement="top" withArrow label={t(`home.toolbar.${props.name}`)}>
       <Icon
         class={`toolbar-${props.name}`}
+        aria-label={t(`home.toolbar.${props.name}`)}
+        tabIndex={0}
         _hover={{
           bgColor: hoverColor(),
         }}
@@ -57,6 +59,8 @@ export const RightIcon = <C extends ElementType = "svg">(
       <Icon
         // bgColor="$info4"
         color={getMainColor()}
+        aria-label={props.tips ? t(`home.toolbar.${props.tips}`) : undefined}
+        tabIndex={0}
         _hover={{
           bgColor: getMainColor(),
           color: "white",

diff --git a/src/utils/notify.tsx b/src/utils/notify.tsx
@@ -17,6 +17,8 @@ const notify = {
       render: (props) => {
         return (
           <Box
+            role="status"
+            aria-live="polite"
             css={{
               display: "flex",
               backdropFilter: "blur(8px)",